<div class="container">
    <!--- products ---->
    <div class="products">
        <div class="product-filter">
            <h1><a href="#">FILTER</a></h1>
            <div class="product-filter-grids"> 
                <div class="col-md-3 product-filter-grid1-brands">
                    <h3>Categories</h3>
                    <ul class="col-md-6 unstyled-list b-list1">
                    	<?php
							// Get category
							$get_all_categories = get_by_sql('SELECT * FROM  tbl_category WHERE status = 1 ORDER BY id DESC', '');
							if(sizeof($get_all_categories) > 0 ) {
								foreach($get_all_categories AS $all_category) :
						?>
                        <li><a href="#"><?php echo $all_category['name']?></a></li>
                        <?php 
								endforeach;
							}
						?>
                        <div class="clearfix"> </div>
                    </ul>
                    <div class="clearfix"> </div>
                </div>
                <!---->
                <div class="col-md-6 product-filter-grid1-brands-col2">
                        <div class="producst-cate-grids">
                        	<?php
								// Get category
								$get_categories = get_by_sql('SELECT * FROM  tbl_category WHERE status = 1 ORDER BY id DESC LIMIT 3', '');
								if(sizeof($get_categories) > 0 ) {
									foreach($get_categories AS $data_category) :
									// Count product
									$num_products = countOf('tbl_product','cat_id ='. $data_category['id'] );
							?>
                            <div class="col-md-4 producst-cate-grid text-center">
                                <h2><?php echo $data_category['name']?></h2>
                                <img class="r-img text-center img-responsive" src="admin/upload/categories/<?php echo $data_category['image']?>" width="189" height="189" title="name" alt="starndard" >
                                <span><img src="admin/upload/categories/<?php echo $data_category['image']?>" alt="<?php echo $data_category['name']?>" title="<?php echo $data_category['name']?>"></span>
                                <h4>TOTAL</h4>
                                <label><?php echo $num_products?> PRODUCTS</label>
                                <a class="r-list-w" href="#"><img src="images/list-icon.png" title="list"></a>
                            </div>
                             <?php 
									endforeach;
								}
							?>
                        </div>
                </div>
                <!---->
                <div class="clearfix"> </div>
            </div>
        </div>
    </div>
    </div>
    <div class="clearfix"> </div>
    <?php
		$id = $_REQUEST['id'];
		// Get products
		$get_products = get_by_sql('SELECT * FROM  tbl_product WHERE status = 1 AND id='.$id.' ORDER BY id DESC ', '');
	?>
    <!-- //products ---->
    <!----product-details--->
    <div class="product-details">
        <div class="container">
        <div class="product-details-row1">
            <div class="product-details-row1-head">
                <h2><?php echo $get_products[0]['name']?></h2>
                <!--<p>Hookset Handcrafted Fabric Chukka</p>-->
            </div>
            <div class="col-md-4 product-details-row1-col1">
                <!----details-product-slider--->
            <!-- Include the Etalage files -->
                <link rel="stylesheet" href="css/etalage.css">
                <script src="js/jquery.etalage.min.js"></script>
            <!-- Include the Etalage files -->
            <script>
                    jQuery(document).ready(function($){
        
                        $('#etalage').etalage({
                            thumb_image_width: 300,
                            thumb_image_height: 400,
                            source_image_width: 900,
                            source_image_height: 1000,
                            show_hint: true,
                            click_callback: function(image_anchor, instance_id){
                                alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');
                            }
                        });
                        // This is for the dropdown list example:
                        $('.dropdownlist').change(function(){
                            etalage_show( $(this).find('option:selected').attr('class') );
                        });

                });
            </script>
            <!----//details-product-slider--->
            <div class="details-left">
                <div class="details-left-slider">
                    <ul id="etalage">
                        <li>
                            <a href="optionallink.html">
                                <img class="etalage_thumb_image" src="images/product-slide/image1_thumb.jpg" />
                                <img class="etalage_source_image" src="images/product-slide/image1_large.jpg" />
                            </a>
                        </li>
                        <li>
                            <img class="etalage_thumb_image" src="images/product-slide/image2_thumb.jpg" />
                            <img class="etalage_source_image" src="images/product-slide/image2_large.jpg" />
                        </li>
                        <li>
                            <img class="etalage_thumb_image" src="images/product-slide/image3_thumb.jpg" />
                            <img class="etalage_source_image" src="images/product-slide/image3_large.jpg" />
                        </li>
                        <li>
                            <img class="etalage_thumb_image" src="images/product-slide/image4_thumb.jpg" />
                            <img class="etalage_source_image" src="images/product-slide/image4_large.jpg" />
                        </li>
                        <li>
                            <img class="etalage_thumb_image" src="images/product-slide/image5_thumb.jpg" />
                            <img class="etalage_source_image" src="images/product-slide/image5_large.jpg" />
                        </li>
                        <li>
                            <img class="etalage_thumb_image" src="images/product-slide/image6_thumb.jpg" />
                            <img class="etalage_source_image" src="images/product-slide/image6_large.jpg" />
                        </li>
                        <li>
                            <img class="etalage_thumb_image" src="images/product-slide/image7_thumb.jpg" />
                            <img class="etalage_source_image" src="images/product-slide/image7_large.jpg" />
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!--<div class="clearfix"> </div>-->
        
    <!--//product-details--->
    </div>
    <!---- product-details ---->
    <div class="product-tabs">
        <!--Horizontal Tab-->
        <div id="horizontalTab">
            <ul>
                <li><a href="#tab-1">Product overwiev</a></li>
                <li><a href="#tab-2">Features</a></li>
                <li><a href="#tab-3">Customer reviews</a></li>
            </ul>
            <div id="tab-1" class="product-complete-info">
                <h3>DESCRIPTION:</h3>
                <p><?php echo $get_products[0]['overwiew']?></p>
            </div>
            <div id="tab-2" class="product-complete-info">
                <h3>DESCRIPTION:</h3>
                <p><?php echo $get_products[0]['feature']?></p>
            </div>
            <div id="tab-3"  class="product-complete-info">
                <h3>DESCRIPTION:</h3>
                <p><?php echo $get_products[0]['review']?></p>
            </div>
        </div>
        <!-- Responsive Tabs JS -->
        <script src="js/jquery.responsiveTabs.js" type="text/javascript"></script>
    
        <script type="text/javascript">
            $(document).ready(function () {
                $('#horizontalTab').responsiveTabs({
                    rotate: false,
                    startCollapsed: 'accordion',
                    collapsible: 'accordion',
                    setHash: true,
                    disabled: [3,4],
                    activate: function(e, tab) {
                        $('.info').html('Tab <strong>' + tab.id + '</strong> activated!');
                    }
                });
    
                $('#start-rotation').on('click', function() {
                    $('#horizontalTab').responsiveTabs('active');
                });
                $('#stop-rotation').on('click', function() {
                    $('#horizontalTab').responsiveTabs('stopRotation');
                });
                $('#start-rotation').on('click', function() {
                    $('#horizontalTab').responsiveTabs('active');
                });
                $('.select-tab').on('click', function() {
                    $('#horizontalTab').responsiveTabs('activate', $(this).val());
                });
    
            });
        </script>
    </div>
    <!-- //product-details ---->
    </div>
</div><!-- end product-details -->